<template>
  <div class="tp-box">
    <a-drawer
      :visible="vprops.vvisible"
      :width="vprops.width"
      :closable="vprops.vclosable"
      :destroyOnClose="vprops.vdestroyOnClose"
      @close="handleVillageClose"
    >
      <template #title>
        <div class="title-detail" style="float: left">
          <Tooltip placement="top">
            <template #title>
              <span>{{ getTipTitle }}</span>
            </template>
            <h3>{{ getTitle }}</h3>
          </Tooltip>
          <a-space direction="vertical" :size="12">
            <!-- <a-range-picker v-model:value="value4" :format="dateFormat" /> -->
          </a-space>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <!-- <a-space class="search-btn">
            <a-button type="primary">返回1</a-button>
          </a-space> -->
          &nbsp;&nbsp;&nbsp;&nbsp;
        </div>
        <!-- <div style="float: right">
          <a-space style="float: right; margin-right: 10px">
            <a-button type="primary" @click="handleExport"> 导出 </a-button>
          </a-space>
          &nbsp;&nbsp;&nbsp;&nbsp;
        </div> -->
      </template>

      <!-- :scroll="{ x: 1500, y: 600 }" -->
      <a-table
        :columns="v_computedTableColumn"
        :data-source="v_computedTableData"
        :page-size-options="v_pageSizeOptions"
        :loading="v_loading"
        bordered
        :pagination="false"
        size="middle"
        :scroll="{ x: 'calc(700px + 50%)', y: vprops._detailTableHeight }"
      >
        <!-- <template #action>
          <a>action</a>
        </template> -->
      </a-table>
      <div class="pagination">
        <a-pagination
          show-size-changer
          v-model:current="v_pageIndex"
          v-model:pageSize="v_pageSize"
          :total="v_total"
          @show-size-change="onShowSizeChange"
        />
      </div>
      <DetailYhDrawer
        v-model:visible="yhvisible"
        title="抽屉标题"
        :width="1500"
        :yhdetailTableHeight="yhdetailTableHeight"
        :yhclosable="true"
        :yhdestroyOnClose="true"
        :yhdata="yhdetailData"
        :yhdetailParams="yhdetailParams"
        :yhcurrentqx="yhcurrentqx"
        :yhcurrentTitle="yhcurrentTitle"
        @close="handleyhClose"
      >
        <!-- <p>抽屉内容</p> -->
      </DetailYhDrawer>
    </a-drawer>
  </div>
</template>
<script setup lang="ts">
  import { Tooltip } from 'ant-design-vue';
  import { ref, computed, onMounted, watch } from 'vue';
  import { getNineVillageDangerList } from '/@/api/demo/system'; //村级工作进展
  import DetailYhDrawer from '../component/detailYhDrawer.vue';
  import { useGlobSetting } from '/@/hooks/setting';
  import { useUserStore } from '/@/store/modules/user';
  import { downloadByUrl } from '/@/utils/file/download';
  //   import Detail from './component/detailDrawer.vue';
  const userStore = useUserStore();
  const globSetting = useGlobSetting();
  // 默认传过来的值q
  const vprops = defineProps({
    vvisible: {
      type: Boolean,
      default: true,
    },
    title: {
      type: String,
      default: '',
    },
    width: {
      type: Number,
      default: 256,
    },
    detailTableHeight: {
      type: Number,
      default: 600,
    },
    hzfs: {
      type: String,
      default: '',
    },
    vclosable: {
      type: Boolean,
      default: true,
    },
    data: {
      type: Array,
      default: () => [],
    },
    vdetailParams: {
      type: Object,
      default: () => {},
    },
    vcurrentXzqdmname: {
      type: String,
      default: '',
    },
    vcurrentTitle: {
      type: Object,
      default: () => {},
    },
    wscolsList: {
      type: Array,
      default: () => [{ wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }],
    },
    vdestroyOnClose: {
      type: Boolean,
      default: true,
    },
    onClose: {
      type: Function as PropType<() => void>,
      default: () => {},
    },
  });
  let v_pageIndex = ref(1);
  let v_pageSize = ref(100);
  let v_loading = ref(false);
  const v_pageSizeOptions = ref<string[]>(['100', '200', '300']);
  let v_tableSource = ref<any>([]);
  let v_total = ref(0);
  const yhvisible = ref(false);
  let yhdetailData = ref<any[]>([]);
  let yhdetailParams = ref({}); // 详情参数
  let yhcurrentTitle = ref({});
  let yhdetailTableHeight = ref<number>(0); // 表格高度
  const v_columns = [
    { title: '序号', width: 50, dataIndex: 'index', key: 'index', align: 'center', fixed: 'left' },
    {
      title: '村/社区',
      dataIndex: 'village',
      key: 'village',
      align: 'center',
      width: 170,
      scopedSlots: { customRender: 'village' },
	    ellipsis: true, //需ant版本为1.5及以上
    },
    {
    title: '已核验房屋总数',
    dataIndex: 'cnt',
    key: 'cnt',
    align: 'center',
    width: 120,
  },
  {
    title: '是否满足“双通道”要求',
    children: [
      {
        title: '已满足',
        dataIndex: 'jsrysstd_s',
        key: 'jsrysstd_s',
        width: 100,
        align: 'center',
      },
      {
        title: '未满足',
        dataIndex: 'jsrysstd_f',
        key: 'jsrysstd_f',
        width: 100,
        align: 'center',
      },
    ],
    align: 'center',
    width: 170,
  },
  {
    title: '是否存在彩钢板建筑出租住人',
    children: [
      {
        title: '已存在',
        dataIndex: 'wdwhjgfjgqsyyrkrgbdj_s',
        key: 'wdwhjgfjgqsyyrkrgbdj_s',
        width: 100,
        align: 'center',
      },
      {
        title: '不存在',
        dataIndex: 'wdwhjgfjgqsyyrkrgbdj_f',
        key: 'wdwhjgfjgqsyyrkrgbdj_f',
        width: 100,
        align: 'center',
      },
    ],
    align: 'center',
    width: 170,
  },
  // 居住 商业
  {
    title: '是否存在窗口防护网、广告牌、铁栅栏',
    children: [
      {
        title: '已存在',
        dataIndex: 'sfczckfhwggptzl_s',
        key: 'sfczckfhwggptzl_s',
        width: 100,
        align: 'center',
      },
      {
        title: '不存在',
        dataIndex: 'sfczckfhwggptzl_f',
        key: 'sfczckfhwggptzl_f',
        width: 100,
        align: 'center',
      },
    ],
    align: 'center',
    width: 170,
  },
  // 居住 商业
  {
    title: '电动自行车及蓄电池是否在室内停放充电',
    children: [
      {
        title: '是',
        dataIndex: 'use_electric_bicycle_s',
        key: 'use_electric_bicycle_s',
        width: 100,
        align: 'center',
      },
      {
        title: '否',
        dataIndex: 'use_electric_bicycle_f',
        key: 'use_electric_bicycle_f',
        width: 100,
        align: 'center',
      },
    ],
    align: 'center',
    width: 170,
  },
  //  商业
  {
    title: '服务于房屋的电动自行车充电设施是否按要求建设',
    children: [
      {
        title: '是',
        dataIndex: 'fwyfwdddzxccdsssfayqjshsf_s',
        key: 'fwyfwdddzxccdsssfayqjshsf_s',
        width: 100,
        align: 'center',
      },
      {
        title: '否',
        dataIndex: 'fwyfwdddzxccdsssfayqjshsf_f',
        key: 'fwyfwdddzxccdsssfayqjshsf_f',
        width: 100,
        align: 'center',
      },
    ],
    align: 'center',
    width: 170,
  },
  {
    title: '是否违规使用液化石油气瓶',
    children: [
      {
        title: '是',
        dataIndex: 'use_bottled_liquefied_gas_s',
        key: 'use_bottled_liquefied_gas_s',
        width: 100,
        align: 'center',
      },
      {
        title: '否',
        dataIndex: 'use_bottled_liquefied_gas_f',
        key: 'use_bottled_liquefied_gas_f',
        width: 100,
        align: 'center',
      },
    ],
    align: 'center',
    width: 170,
  },
  {
    title: '疏散通道是否堆放杂物',
    children: [
      {
        title: '是',
        dataIndex: 'use_stacked_items_s',
        key: 'use_stacked_items_s',
        width: 100,
        align: 'center',
      },
      {
        title: '否',
        dataIndex: 'use_stacked_items_f',
        key: 'use_stacked_items_f',
        width: 100,
        align: 'center',
      },
    ],
    align: 'center',
    width: 170,
  },
  {
    title: '是否私拉乱接电线',
    children: [
      {
        title: '是',
        dataIndex: 'slljdx_s',
        key: 'slljdx_s',
        width: 100,
        align: 'center',
      },
      {
        title: '否',
        dataIndex: 'slljdx_f',
        key: 'slljdx_f',
        width: 100,
        align: 'center',
      },
    ],
    align: 'center',
    width: 170,
  },
  {
    title: '其他高风险火灾隐患问题',
    children: [
      {
        title: '是',
        dataIndex: 'notes_s',
        key: 'notes_s',
        width: 100,
        align: 'center',
      },
      {
        title: '否',
        dataIndex: 'notes_f',
        key: 'notes_f',
        width: 100,
        align: 'center',
      },
    ],
    align: 'center',
      width: 170,
    },
  ];
  // 计算属性，用于实时更新数据到页面上
  const v_computedTableColumn = computed(() => {
    let newColumn: any = [];
    newColumn = v_columns;
    return newColumn;
  });
  const v_computedTableData = computed(() => {
    console.log(v_tableSource.value);
    return v_tableSource.value;
  });
  const getTitle = computed(() => {
    console.log(
      '************************************************vcurrentTitle********************************',
      vprops.vcurrentTitle.title,
    );
    // let str = `【${props.currentXzqdmname} 】-- ${props.currentTitle}`;
    let str = `【${vprops.vcurrentTitle.title}】的隐患情况统计`;
    console.log('lenght', str.length);
    if (str.length > 50) {
      str = str.substring(0, 50) + '...';
    }
    return str;
  });
  const getTipTitle = computed(() => {
    let str = vprops.vcurrentTitle.title;
    return str;
  });
  watch(
    () => vprops.vvisible,
    (newVal, oldVal) => {
      // console.log(`visible 变化了，新值：${newVal}，旧值：${oldVal}`);
      // 在这里执行你需要的操作
      if (newVal) {
        console.log('@参数', vprops.vdetailParams);
        getTableData_v();
      }
    },
  );
  const getTableData_v = async () => {
    let params: any = {
      pageindex: v_pageIndex.value,
      pagesize: v_pageSize.value,

      ...vprops.vdetailParams,
    };

    console.log(
      '************************************************村级********************************',
      vprops.vdetailParams,
    );

    v_loading.value = true;
    let res = await getNineVillageDangerList(params);
    v_loading.value = false;
    
    let cnt = ttotal(res.items, 'cnt');

let jsrysstd_s = ttotal(res.items, 'jsrysstd_s');
let jsrysstd_f = ttotal(res.items, 'jsrysstd_f');
let wdwhjgfjgqsyyrkrgbdj_s = ttotal(res.items, 'wdwhjgfjgqsyyrkrgbdj_s');
let index_count = res.items.length + 1;
let wdwhjgfjgqsyyrkrgbdj_f = ttotal(res.items, 'wdwhjgfjgqsyyrkrgbdj_f');
let sfczckfhwggptzl_s = ttotal(res.items, 'sfczckfhwggptzl_s');
let sfczckfhwggptzl_f = ttotal(res.items, 'sfczckfhwggptzl_f');
let use_electric_bicycle_s = ttotal(res.items, 'use_electric_bicycle_s');

let use_electric_bicycle_f = ttotal(res.items, 'use_electric_bicycle_f');
let fwyfwdddzxccdsssfayqjshsf_s = ttotal(res.items, 'fwyfwdddzxccdsssfayqjshsf_s');
let fwyfwdddzxccdsssfayqjshsf_f = ttotal(res.items, 'fwyfwdddzxccdsssfayqjshsf_f');
let use_bottled_liquefied_gas_s = ttotal(res.items, 'use_bottled_liquefied_gas_s');
let use_bottled_liquefied_gas_f = ttotal(res.items, 'use_bottled_liquefied_gas_f');
let use_stacked_items_s = ttotal(res.items, 'use_stacked_items_s');
let use_stacked_items_f = ttotal(res.items, 'use_stacked_items_f');

let slljdx_s = ttotal(res.items, 'slljdx_s');
let slljdx_f = ttotal(res.items, 'slljdx_f');
let notes_s = ttotal(res.items, 'notes_s');
let notes_f = ttotal(res.items, 'notes_f');
let tallObj = {
  village: '汇总',
  cnt: cnt,
  jsrysstd_s: jsrysstd_s,
  jsrysstd_f: jsrysstd_f,
  wdwhjgfjgqsyyrkrgbdj_s: wdwhjgfjgqsyyrkrgbdj_s,
  wdwhjgfjgqsyyrkrgbdj_f: wdwhjgfjgqsyyrkrgbdj_f,
  sfczckfhwggptzl_s: sfczckfhwggptzl_s,
  index: index_count,
  sfczckfhwggptzl_f: sfczckfhwggptzl_f,
  use_electric_bicycle_s: use_electric_bicycle_s,
  use_electric_bicycle_f: use_electric_bicycle_f,
  fwyfwdddzxccdsssfayqjshsf_s: fwyfwdddzxccdsssfayqjshsf_s,
  fwyfwdddzxccdsssfayqjshsf_f: fwyfwdddzxccdsssfayqjshsf_f,
  use_bottled_liquefied_gas_s: use_bottled_liquefied_gas_s,
  use_bottled_liquefied_gas_f: use_bottled_liquefied_gas_f,
  use_stacked_items_s: use_stacked_items_s,
  use_stacked_items_f: use_stacked_items_f,
  slljdx_s: slljdx_s,
  slljdx_f: slljdx_f,
  notes_s: notes_s,
  notes_f: notes_f,
};

    let list = res.items;
    v_tableSource.value = list;
    v_tableSource.value.push(tallObj);
    v_total.value = res.total;
    // console.log('@resqqq', list);
  };

  // 计算总数的方法
  function ttotal(arr: any, item: any) {
    let total = arr.reduce((pre: any, cur: any) => {
      return parseInt(pre) + parseInt(cur[item]);
    }, 0);
    return total;
  }

  //  调用 父组件传过来的方法
  const emit = defineEmits(['close']);
  const handleVillageClose = () => {
    emit('close');
    v_pageIndex.value = 1;
    v_pageSize.value = 15;
    console.log('************8vvisible*************', vprops.vvisible);
  };
  function handleyhClose() {
    yhvisible.value = false;
  }

  // 切换页码的时候更新  pageIndex 和  pageSize
  const onShowSizeChange = (pageIndex: number, pageSize: number) => {
    // antDesign  自动给  pageIndex 和 pageSize 赋值
    // pageIndex.value = pageIndex;
    // pageSize.value = pageSize;
    // console.log('@pageIndex,pageSize', pageIndex, pageSize);
  };
  watch(v_pageSize, () => {
    // console.log('pageSize', pageSize.value);
    getTableData_v();
  });
  watch(v_pageIndex, () => {
    // console.log('current', pageIndex.value);
    getTableData_v();
  });
  onMounted(() => {
    getTableData_v();
  });
</script>
<style lang="less" scoped>
  .tp-box {
    height: 100%;
  }
  .title-detail {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .pagination {
    margin-top: 5px;
    display: flex;
    justify-content: flex-end;
  }
</style>
